<!-- App.vue -->
<template>
  <div class="app">
    <h1>Vue3 + TypeScript Popup 组件示例</h1>
    
    <!-- 基础用法 -->
    <div class="demo-section">
      <h3>基础用法</h3>
      <button @click="showBasic = true">显示基础弹窗</button>
      <PopupComponent v-model="showBasic" title="基础弹窗">
        <p>这是一个基础的弹窗内容</p>
      </PopupComponent>
    </div>

    <!-- 不同位置 -->
    <div class="demo-section">
      <h3>不同位置</h3>
      <div class="button-group">
        <button 
          v-for="pos in positions" 
          :key="pos"
          @click="showPosition = pos"
          :data-popup-reference="showPosition === pos"
        >
          {{ pos }}
        </button>
      </div>
      
      <PopupComponent
        v-model="showPosition"
        title="位置演示"
        show-arrow
      >
        <p>当前位置: {{ showPosition }}</p>
        <button @click="showPosition = false">关闭</button>
      </PopupComponent>
    </div>

    <!-- 触发器用法 -->
    <div class="demo-section">
      <h3>触发器用法</h3>
      <button 
        ref="triggerRef"
        @click="handleTriggerClick"
      >
        点击显示弹窗
      </button>
      
      <PopupComponent
        ref="popupRef"
        v-model="showTrigger"
        placement="bottom-start"
        title="触发器弹窗"
        :offset="[0, 8]"
      >
        <p>通过触发器打开的弹窗</p>
        <p>可以自动计算位置</p>
      </PopupComponent>
    </div>

    <!-- 自定义内容 -->
    <div class="demo-section">
      <h3>自定义内容</h3>
      <button @click="showCustom = true">显示自定义弹窗</button>
      
      <PopupComponent
        v-model="showCustom"
        title="自定义弹窗"
        :show-mask="false"
        placement="right"
      >
        <template #header>
          <div class="custom-header">
            <h4>自定义头部</h4>
            <span class="subtitle">副标题</span>
          </div>
        </template>
        
        <div class="custom-content">
          <img src="https://via.placeholder.com/200x150" alt="示例" />
          <p>自定义内容区域</p>
        </div>
        
        <template #footer>
          <div class="custom-footer">
            <button @click="showCustom = false">取消</button>
            <button class="primary" @click="showCustom = false">确定</button>
          </div>
        </template>
      </PopupComponent>
    </div>

    <!-- 自动调整位置 -->
    <div class="demo-section">
      <h3>自动调整位置</h3>
      <button 
        style="position: fixed; bottom: 20px; right: 20px"
        @click="showAuto = true"
      >
        边缘弹窗
      </button>
      
      <PopupComponent
        v-model="showAuto"
        title="自动调整位置"
        placement="top"
        auto-placement
      >
        <p>这个弹窗会自动调整到合适的位置，防止溢出屏幕</p>
      </PopupComponent>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PopupComponent from '../components/Popup.vue'

const showBasic = ref(false)
const showPosition = ref<boolean>(false)
const showTrigger = ref(false)
const showCustom = ref(false)
const showAuto = ref(false)

const popupRef = ref<InstanceType<typeof PopupComponent>>()
const triggerRef = ref<HTMLElement>()

const positions = [
  'top', 'top-start', 'top-end',
  'bottom', 'bottom-start', 'bottom-end',
  'left', 'left-start', 'left-end',
  'right', 'right-start', 'right-end'
]

const handleTriggerClick = (e: Event) => {
  showTrigger.value = true
}
</script>

<style scoped>
.app {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.demo-section {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.demo-section h3 {
  margin-top: 0;
  color: #333;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button-group button {
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.button-group button:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.custom-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.custom-header h4 {
  margin: 0;
  color: #333;
}

.custom-header .subtitle {
  font-size: 12px;
  color: #999;
}

.custom-content {
  text-align: center;
}

.custom-content img {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

.custom-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.custom-footer button {
  padding: 6px 16px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.custom-footer button.primary {
  background: #1890ff;
  border-color: #1890ff;
  color: #fff;
}
</style>